<template>
	<view class="seach">
		<view class="top" v-if="top" @tap="backtop">
			<img src="../../static/top.png" alt="" />
		</view>
		<view class="index_seach" @click="seachFn">
			<view class="index_input">
				<img class="seach_img" src="../../static/seach.png" alt="" srcset="" />
				<input type="text" placeholder="请输入诗词名/作者/诗句" placeholder-class="pla" />
			</view>

		</view>
		<view class="chaodai">
			<view class="left">
				<span class="shu"></span>
				<span class="title">朝代：</span>
				<view class="item">
					<span @click="select(index,api)" v-for="(item,index) in dynastys"
						:class="[dysnastys==index?'actives1':'']">{{item.name}}</span>

				</view>


			</view>

		</view>
		<view class="types">
			<span class="shu"></span>
			<span class="title">类型：</span>

			<view class="poetey_type">

				<span @click="type_cli(index,item.kind)" :class="[index==tabs?'active':'']"
					v-for="(item,index) in typelist">{{item.type}}</span>
			</view>
		</view>
		<view class="hot_poetry hot_author" v-if="types=='shi'||types=='ci'">
			<view class="" v-if="shiciList.length>0">
				<div class="poetry" v-for="(item,index) in shiciList"  @click="poetrydetail(item)">
					<div class="title">{{item.title}}</div>
					<p class="author">{{item.author}}</p>
					<div class="content" v-html="item.content">

					</div>
				</div>
				<view class="more">
					<span>{{moreText}}</span>
				</view>
			</view>
			<view class="" v-else>
				<p style="text-align: center;color: #333;padding-top: 50px;">
					暂无数据！
				</p>
			</view>


		</view>
		<view class="qufu" v-else>
			<view class="" v-if="qufuwen.length>0">
				<view class="qufu_list" v-for="(item,index) in qufuwen" @click="poetrydetail(item)">
					<span class="title">{{item.title}}</span>
					<span class="author">{{item.author}}</span>
				</view>
				<view class="more">
					<span>{{moreText}}</span>
				</view>
			</view>

			<view class="" v-else>
				<p style="text-align: center;color: #333;padding-top: 50px;">
					暂无数据！
				</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typelist: [{
					type: '诗',
					kind: 'shi'
				}, {
					type: '词',
					kind: 'ci'
				}, {
					type: '曲',
					kind: 'qu'
				}, {
					type: '赋',
					kind: 'fu'
				}, {
					type: '文',
					kind: 'wen'
				}],
				dynastys: [{
						name: '先秦',
						api: "qinchao"
					},
					{
						name: '两汉',
						api: "hanchao"
					},
					{
						name: '魏晋',
						api: "sanguo"
					},
					{
						name: '南北',
						api: "nanbeichao"
					},
					{
						name: '隋代',
						api: "suichao"
					},
					{
						name: '唐代',
						api: "tangchao"
					},
					{
						name: '五代',
						api: "wudai"
					},
					{
						name: '宋代',
						api: "songchao"
					},
					{
						name: '金朝',
						api: "jinchao"
					},
					{
						name: '元代',
						api: "yuan"
					},
					{
						name: '明代',
						api: "ming"
					},
					{
						name: '清代',
						api: "qing"
					},
					{
						name: '近代',
						api: "xiandai"
					}
				],
				tabs: 0,
				dysnastys: 0,
				types: 'shi',
				shiciList: [],
				qufuwen: [],
				api_name: 'qinchao',
				pageNum: 0,
				pageSize: 20,
				total: 0,
				moreText: '加载中',
				top:false
			}
		},
		onLoad() {
			this.qinlist()

		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "一起学诗词吧",
				imageUrl: "https://www.leedong.top/img/11556.png"
			}
		
		},
		//2.分享到朋友圈
		onShareTimeline() {
		
			return {
				title: '一起学诗词吧',
				imageUrl: "https://www.leedong.top/img/11556.png",
		
		
			}
		},
		onReachBottom(){
	
			if (this.dysnastys == 0) {
				this.qinlist()
			} else if (this.dysnastys == 1) {
				this.hanlist()
			} else if (this.dysnastys == 2) {
				this.sanguolist()
			} else if (this.dysnastys == 3) {
				this.nanbeichaolist()
			} else if (this.dysnastys == 4) {
				this.suichaolist()
			} else if (this.dysnastys == 5) {
				this.tangchaolist()
			} else if (this.dysnastys == 6) {
				this.wudailist()
			} else if (this.dysnastys == 7) {
				this.songchaolist()
			} else if (this.dysnastys == 8) {
				this.jinchaolist()
			} else if (this.dysnastys == 9) {
				this.yuanlist()
			} else if (this.dysnastys == 10) {
				this.minglist()
			} else if (this.dysnastys == 11) {
				this.qinglist()
			} else if (this.dysnastys == 12) {
				this.xiandailist()
			}
		},
		methods: {
			poetrydetail(t){
			
				uni.navigateTo({
					url:'/pages/poetrydetail/index?title='+JSON.stringify(t)
				})
			},
			seachFn(){
				uni.switchTab({
					url:'../../pages/seach/index'
				})
			},
			async qinlist() {
				this.pageNum+=1;
				const data = await this.$api.qinchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}


			},
			async hanlist() {
                this.pageNum+=1;
				const data = await this.$api.hanchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}
			},
			async sanguolist() {
				this.pageNum+=1;
				const data = await this.$api.sanguo({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async nanbeichaolist() {
				this.pageNum+=1;
				const data = await this.$api.nanbeichao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async suichaolist() {
				this.pageNum+=1;
				const data = await this.$api.suichao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async tangchaolist() {
				this.pageNum+=1;
				const data = await this.$api.tangchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20,
					content:"",
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async wudailist() {
				this.pageNum+=1;
				const data = await this.$api.wudai({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async songchaolist() {
				this.pageNum+=1;
				const data = await this.$api.songchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20,
						content:"",
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async jinchaolist() {
				this.pageNum+=1;
				const data = await this.$api.jinchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async yuanlist() {
				this.pageNum+=1;
				const data = await this.$api.yuanchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}
			},
			async minglist() {
				this.pageNum+=1;
				const data = await this.$api.mingchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async qinglist() {
				this.pageNum+=1;
				const data = await this.$api.qingchao({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			async xiandailist() {
				this.pageNum+=1;
				const data = await this.$api.xiandai({
					types: this.types,
					pageNumber: this.pageNum,
					pageSize: 20
				});
				let totalPage = Math.ceil(data.total / 10);
				if (this.pageNum > totalPage) {
					this.moreText = '已加载全部'
					return;
				}

				if (this.types == 'shi' || this.types == 'ci') {
					this.shiciList = this.shiciList.concat(data.rows)
					console.log(this.shiciList, 'pp00pp')
				} else if (this.types == 'qu' || this.types == 'wen' || this.types == 'fu') {
					this.qufuwen = this.qufuwen.concat(data.rows)
				}

			},
			type_cli(v, types) {
				this.tabs = v;
				this.pageNum = 0;
				this.types = types;
				this.shiciList = [];
				this.qufuwen = []
				if (this.dysnastys == 0) {
					this.qinlist()
				} else if (this.dysnastys == 1) {
					this.hanlist()
				} else if (this.dysnastys == 2) {
					this.sanguolist()
				} else if (this.dysnastys == 3) {
					this.nanbeichaolist()
				} else if (this.dysnastys == 4) {
					this.suichaolist()
				} else if (this.dysnastys == 5) {
					this.tangchaolist()
				} else if (this.dysnastys == 6) {
					this.wudailist()
				} else if (this.dysnastys == 7) {
					this.songchaolist()
				} else if (this.dysnastys == 8) {
					this.jinchaolist()
				} else if (this.dysnastys == 9) {
					this.yuanlist()
				} else if (this.dysnastys == 10) {
					this.minglist()
				} else if (this.dysnastys == 11) {
					this.qinglist()
				} else if (this.dysnastys == 12) {
					this.xiandailist()
				}

			},
			select(v, api) {
				this.types = 'shi';
				this.tabs = 0;
				this.api_name = api;
				this.pageNum = 0;
				this.dysnastys = v;
				this.shiciList = [];
				this.qufuwen = []
				if (v == 0) {
					this.qinlist()
				} else if (v == 1) {
					this.hanlist()
				} else if (v == 2) {
					this.sanguolist()
				} else if (v == 3) {
					this.nanbeichaolist()
				} else if (v == 4) {
					this.suichaolist()
				} else if (v == 5) {
					this.tangchaolist()
				} else if (v == 6) {
					this.wudailist()
				} else if (v == 7) {
					this.songchaolist()
				} else if (v == 8) {
					this.jinchaolist()
				} else if (v == 9) {
					this.yuanlist()
				} else if (v == 10) {
					this.minglist()
				} else if (v == 11) {
					this.qinglist()
				} else if (v == 12) {
					this.xiandailist()
				}
			},
			backtop(){
				uni.pageScrollTo({
				                    scrollTop: 0,
				                    duration: 100,
				                });
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			                if (e.scrollTop > 100) { //当距离大于10时显示回到顶部按钮
			                    this.top = true
			                } else {
			                    this.top = false
			                }
			            }
		}
	}
</script>

<style lang="scss">
	.seach {
		.index_seach {
			height: 50px;
			width: 100%;
			background-color: #7d8468;

			.index_input {
				width: 97%;
				height: 50px;
				margin: auto;
				display: flex;
				align-items: center;
				position: relative;

				input {
					height: 28px;
					border-radius: 20px;
					width: 100%;
					background-color: #fff;
					padding-left: 25px;
					font-size: 14px;
				}

				.seach_img {
					width: 32px;
					position: absolute;
					height: 32px;
				}

				.pla {
					padding-left: 30px;
					font-size: 14px;
				}

			}
		}

		.chaodai {
			width: 100%;
			display: flex;
			margin-top: 20px;
			border-bottom: 1px solid #f5f5f5;

			.left {
				height: 60px;
				.shu {
					height: 25px;
					display: inline-block;
					margin-left: 10px;
					width: 5px;
					vertical-align: middle;
					background-color: #7d8468;
				}

				.title {
					padding-left: 6px;

				}

				.item {
					display: inline;

					span {
						width: 50px;
						text-align: center;
					
						display: inline-block;
					}

					.actives1 {
						border-bottom:3px solid #7d8468;
						
						
						
					}
				}
			}
		}

		.hot_poetry {
			margin-top: 10px;

			.poetry {
				text-align: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				margin-bottom: 10px;

				.title {}

				.author {
					font-size: 13px;
					color: #9a8383;
					padding: 10px;
				}

				.content {
					font-size: 14px;
					padding-bottom: 20px;
					color: #716363;

				}
			}

			.more {
				text-align: center;

				span {
					font-size: 12px;
					color: #9a8383;
				}
			}
		}

		.types {
			height: 50px;
			padding-top: 15px;
			.shu {
				height: 25px;
				display: inline-block;
				margin-left: 10px;
				width: 5px;
				vertical-align: middle;
				background-color: #7d8468;
			}

			.title {
				padding-left: 6px;

			}

			.poetey_type {
				height: 50px;
				margin-top: 20px;
				display: inline;

				text-align: center;

				span {
					color: #7d8468;
					display: inline-block;
					width: 6%;
					padding: 0 20px;
				}

				.active {
					border-bottom: 3px solid #7d8468;
				}
			}
		}

		.qufu {
			.qufu_list {
				display: flex;
				justify-content: space-around;
				padding: 10px;
				border-bottom: 1px solid #f5f5f5;

				.title {
					font-size: 14px;
					width: 80%;
					  white-space: nowrap; /* 不换行 */
					   overflow: hidden; /* 超出部分隐藏 */
					   text-overflow: ellipsis; /* 溢出部分显示省略号 */
				}

				.author {
					text-align: center;
					font-size: 13px;
					width: 20%;
					color: #333;
				}
			}

			.more {
				text-align: center;

				span {
					font-size: 12px;
					color: #9a8383;
				}
			}
		}
.top{
	position: fixed;
	bottom: 20px;
	right: 5px;
	z-index: 1000;
	img{
		width: 32px;
		height: 32px;
	}
}
	}
</style>